<%-- 
    Document   : form
    Created on : Apr 29, 2013, 6:51:02 PM
    Author     : Bzuco
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld"%>
<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Create new CV</title>
    </head>
    <style>
        input.error, textarea.error {
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        interestFields = 0;
        function addInterest() {
            var div = document.createElement("div");
            div.setAttribute('class', 'row');
            var newInput = document.createElement("input");
            var interests = document.getElementById('interests');
            newInput.setAttribute('type', 'text');
            newInput.setAttribute('name', 'cv.interests[' + interestFields + ']');
            div.appendChild(newInput);
            div.appendChild(document.createElement("br"));  
            interests.appendChild(div);
            interestFields += 1;

        }

        skillsFields = 0;
        function addSkill() {
            var div = document.createElement("div");
            div.setAttribute('class', 'row');
            var newInput = document.createElement("input");
            var skills = document.getElementById('skills');
            newInput.setAttribute('type', 'text');
            newInput.setAttribute('name', 'cv.skills[' + skillsFields + ']');           
            div.appendChild(newInput);
            div.appendChild(document.createElement("br"));  
            skills.appendChild(div);
            skillsFields += 1;

        }



        languagesFields = 0;
        function addLanguage() {

            var div = document.createElement("div");
            div.setAttribute('class', 'row');
            var div1 = document.createElement("div");
            div1.setAttribute('class', 'row');
            var div2 = document.createElement("div");
            div2.setAttribute('class', 'row');
            var newInput = document.createElement("input");
            var newInput1 = document.createElement("input");
            var newInput2 = document.createElement("input");
            var languages = document.getElementById('languages');
            var newLabel = document.createElement("label");
            var newLabel1 = document.createElement("label1");
            var newLabel2 = document.createElement("label2");

            
            newLabel.setAttribute('id', "name" + languagesFields);           
            newInput.setAttribute('type', 'text');
            newInput.setAttribute('name', 'cv.languages[' + languagesFields + '].name');           
            div.appendChild(newLabel);
            div.appendChild(newInput);
            div.appendChild(document.createElement("br"));  
            languages.appendChild(div);
              
            newLabel1.setAttribute('id', "level" + languagesFields);            
            newInput1.setAttribute('type', 'text');
            newInput1.setAttribute('name', 'cv.languages[' + languagesFields + '].level');
            div1.appendChild(newLabel1);
            div1.appendChild(newInput1);
            div1.appendChild(document.createElement("br"));  
            languages.appendChild(div1);

            newLabel2.setAttribute('id', "certificate" + languagesFields);            
            newInput2.setAttribute('type', 'text');
            newInput2.setAttribute('name', 'cv.languages[' + languagesFields + '].certificate');
            div2.appendChild(newLabel2);
            div2.appendChild(newInput2);
            div2.appendChild(document.createElement("br"));  
            languages.appendChild(div2);


            document.getElementById("name" + languagesFields).innerHTML = "Name: ";
            document.getElementById("level" + languagesFields).innerHTML = "Level: ";
            document.getElementById("certificate" + languagesFields).innerHTML = "Certificate: ";
            languagesFields += 1;



        }

        schoolsFields = 0;
        function addSchool() {

            var div = document.createElement("div");
            div.setAttribute('class', 'row');
            var div1 = document.createElement("div");
            div1.setAttribute('class', 'row');
            var div2 = document.createElement("div");
            div2.setAttribute('class', 'row');
            var div3 = document.createElement("div");
            div3.setAttribute('class', 'row');
            var div4 = document.createElement("div");
            div4.setAttribute('class', 'row');
            var div5 = document.createElement("div");
            div5.setAttribute('class', 'row'); 
            var newInput = document.createElement("input");
            var newInput1 = document.createElement("input");
            var newInput2 = document.createElement("input");
            var newInput3 = document.createElement("input");
            var newInput4 = document.createElement("input");
            var newInput5 = document.createElement("input");
            var schools = document.getElementById('schools');
            var newLabel = document.createElement("label");
            var newLabel1 = document.createElement("label1");
            var newLabel2 = document.createElement("label2");
            var newLabel3 = document.createElement("label3");
            var newLabel4 = document.createElement("label4");
            var newLabel5 = document.createElement("label5");

            
            newLabel2.setAttribute('id', "name1" + schoolsFields);            
            newInput2.setAttribute('type', 'text');
            newInput2.setAttribute('name', 'cv.schools[' + schoolsFields + '].name');
            div2.appendChild(newLabel2);
            div2.appendChild(newInput2);
            div2.appendChild(document.createElement("br"));  
            schools.appendChild(div2);            
            
            newLabel.setAttribute('id', "from1" + schoolsFields);           
            newInput.setAttribute('type', 'text');
            newInput.setAttribute('name', 'cv.schools[' + schoolsFields + '].from');
            div.appendChild(newLabel);
            div.appendChild(newInput);
            div.appendChild(document.createElement("br"));  
            schools.appendChild(div);
            
            newLabel1.setAttribute('id', "to1" + schoolsFields);            
            newInput1.setAttribute('type', 'text');
            newInput1.setAttribute('name', 'cv.schools[' + schoolsFields + '].to');
            div1.appendChild(newLabel1);
            div1.appendChild(newInput1);
            div1.appendChild(document.createElement("br"));  
            schools.appendChild(div1);           

            newLabel3.setAttribute('id', "field" + schoolsFields);            
            newInput3.setAttribute('type', 'text');
            newInput3.setAttribute('name', 'cv.schools[' + schoolsFields + '].field');
            div3.appendChild(newLabel3);
            div3.appendChild(newInput3);
            div3.appendChild(document.createElement("br"));  
            schools.appendChild(div3);
            
            newLabel4.setAttribute('id', "degree" + schoolsFields);            
            newInput4.setAttribute('type', 'text');
            newInput4.setAttribute('name', 'cv.schools[' + schoolsFields + '].degree');
            div4.appendChild(newLabel4);
            div4.appendChild(newInput4);
            div4.appendChild(document.createElement("br"));  
            schools.appendChild(div4);
           

            newLabel5.setAttribute('id', "note1" + schoolsFields);            
            newInput5.setAttribute('type', 'text');
            newInput5.setAttribute('name', 'cv.schools[' + schoolsFields + '].note');
            div5.appendChild(newLabel5);
            div5.appendChild(newInput5);
            div5.appendChild(document.createElement("br"));  
            schools.appendChild(div5);
            
            document.getElementById("name1" + schoolsFields).innerHTML = "School Name: ";
            document.getElementById("from1" + schoolsFields).innerHTML = "From: ";
            document.getElementById("to1" + schoolsFields).innerHTML = "To: ";            
            document.getElementById("field" + schoolsFields).innerHTML = "Field: ";
            document.getElementById("degree" + schoolsFields).innerHTML = "Degree: ";
            document.getElementById("note1" + schoolsFields).innerHTML = "Note: ";

            schoolsFields += 1;

        }

        workFields = 0;
        function addWork() {

            var div = document.createElement("div");
            div.setAttribute('class', 'row');
            var div1 = document.createElement("div");
            div1.setAttribute('class', 'row');
            var div2 = document.createElement("div");
            div2.setAttribute('class', 'row');
            var div3 = document.createElement("div");
            div3.setAttribute('class', 'row');
            var div4 = document.createElement("div");
            div4.setAttribute('class', 'row');
            var newInput = document.createElement("input");
            var newInput1 = document.createElement("input");
            var newInput2 = document.createElement("input");
            var newInput3 = document.createElement("input");
            var newInput4 = document.createElement("input");
            var workExperience = document.getElementById('workExperience');
            var newLabel = document.createElement("label");
            var newLabel1 = document.createElement("label1");
            var newLabel2 = document.createElement("label2");
            var newLabel3 = document.createElement("label3");
            var newLabel4 = document.createElement("label4");

            
            newLabel2.setAttribute('id', "company" + workFields);            
            newInput2.setAttribute('type', 'text');
            newInput2.setAttribute('name', 'cv.workExperience[' + workFields + '].company');
            div2.appendChild(newLabel2);
            div2.appendChild(newInput2);
            div2.appendChild(document.createElement("br"));  
            workExperience.appendChild(div2);
            
            newLabel.setAttribute('id', "from" + workFields);           
            newInput.setAttribute('type', 'text');
            newInput.setAttribute('name', 'cv.workExperience[' + workFields + '].from');
            div.appendChild(newLabel);
            div.appendChild(newInput);
            div.appendChild(document.createElement("br"));  
            workExperience.appendChild(div);
            

            newLabel1.setAttribute('id', "to" + workFields);           
            newInput1.setAttribute('type', 'text');
            newInput1.setAttribute('name', 'cv.workExperience[' + workFields + '].to');
            div1.appendChild(newLabel1);
            div1.appendChild(newInput1);
            div1.appendChild(document.createElement("br"));  
            workExperience.appendChild(div1);
            
            newLabel3.setAttribute('id', "position" + workFields);           
            newInput3.setAttribute('type', 'text');
            newInput3.setAttribute('name', 'cv.workExperience[' + workFields + '].position');
            div3.appendChild(newLabel3);
            div3.appendChild(newInput3);
            div3.appendChild(document.createElement("br"));  
            workExperience.appendChild(div3);
            

            newLabel4.setAttribute('id', "note" + workFields);            
            newInput4.setAttribute('type', 'text');
            newInput4.setAttribute('name', 'cv.workExperience[' + workFields + '].note');
            div4.appendChild(newLabel4);
            div4.appendChild(newInput4);
            div4.appendChild(document.createElement("br"));  
            workExperience.appendChild(div4);
           

            document.getElementById("company" + workFields).innerHTML = "Company: ";
            document.getElementById("from" + workFields).innerHTML = "From: ";
            document.getElementById("to" + workFields).innerHTML = "To: ";            
            document.getElementById("position" + workFields).innerHTML = "Position: ";
            document.getElementById("note" + workFields).innerHTML = "Note: ";

            workFields += 1;
        }
    </script>
    <body>
        
        <stripes:form beanclass="cvgenerator.web.CvCreateAction" focus="">
            <div id="bla"> 
                <div class="row"><label>ID: </label> <stripes:text name="cv.id" readonly="true"/> <br/> </div>
                <div class="row"><label>Name: </label><stripes:text name="cv.name" /><br/>
                <stripes:errors field="cv.name"/> 
            </div>    
            
            
           
            
            <div id ="address">
                <h2>Address: </h2>
                <p>
                <div class="row"><label>Street: </label> <stripes:text name="cv.address.street" class="test"/> <br/> </div>
                <stripes:errors field="cv.address.street"/>
                <div class="row"><label>Street number: </label><stripes:text name="cv.address.streetNumber" /> <br/> </div>
                <stripes:errors field="cv.address.streetNumber"/>
                <div class="row"><label>Post number: </label><stripes:text name="cv.address.postNumber" /> <br/> </div>
                <stripes:errors field="cv.address.postNumber"/>
                <div class="row"><label>City: </label><stripes:text name="cv.address.city" /><br/> </div>
                <stripes:errors field="cv.address.city"/>
                <div class="row"><label>Country: </label><stripes:text name="cv.address.country" /> <br/> </div>
                <stripes:errors field="cv.address.country"/>
                <div class="row"><label>Phone: </label><stripes:text name="cv.phone" /><br/> </div>
                <stripes:errors field="cv.phone"/>
                <div class="row"><label>E-mail: </label><stripes:text name="cv.email" /><br/> </div>
                <stripes:errors field="cv.email"/>
                <div class="row"><label>Birth date: </label><stripes:text name="cv.bDay" /><br/> </div>
                <stripes:errors field="cv.bDay"/>
                </p>
            </div>

            

           

            <div id ="workExperience">
                <h2>Work Experiences: </h2> 
                <c:forEach var ="i" begin="0" end="${fn:length(actionBean.cv.workExperience) == 0 ? 0 : fn:length(actionBean.cv.workExperience) - 1 }">
                    <p>
                     <div class="row"><label>Company :</label> <stripes:text name="cv.workExperience[${i}].company" /><br/> </div>
                     <stripes:errors field="cv.workExperience[${i}].company"/>
                     <div class="row"><label>From :</label> <stripes:text name="cv.workExperience[${i}].from" /><br/> </div>
                     <stripes:errors field="cv.workExperience[${i}].from"/>
                     <div class="row"><label>To :</label> <stripes:text name="cv.workExperience[${i}].to" /><br/> </div>
                     <stripes:errors field="cv.workExperience[${i}].to"/>                     
                     <div class="row"><label>Position :</label> <stripes:text name="cv.workExperience[${i}].position" /><br/> </div>
                     <stripes:errors field="cv.workExperience[${i}].position"/>
                     <div class="row"><label>Note :</label> <stripes:text name="cv.workExperience[${i}].note" /><br/> </div>
                     <stripes:errors field="cv.workExperience[${i}].note"/>
                    </p>
                    <script type="text/javascript">
                        workFields++;
                    </script>
                </c:forEach>
            </div>

            <div class="row add-btn"><input type="button" onclick="addWork();" name="add" value="Add Work" /> </div> <br/><br/>

            <div id ="schools">
                <h2>Education: </h2>
                <c:forEach var ="i" begin="0" end="${fn:length(actionBean.cv.schools) == 0 ? 0 : fn:length(actionBean.cv.schools) -1}">
                    <p>    
                    <div class="row"><label>School Name: </label><stripes:text name="cv.schools[${i}].name" /><br/> </div>
                    <stripes:errors field="cv.schools[${i}].name"/>
                    <div class="row"><label>From: </label> <stripes:text name="cv.schools[${i}].from" /><br/> </div>
                    <stripes:errors field="cv.schools[${i}].from"/>
                    <div class="row"><label>To: </label><stripes:text name="cv.schools[${i}].to" /><br/> </div>
                    <stripes:errors field="cv.schools[${i}].to"/>
                    <div class="row"><label>Field: </label><stripes:text name="cv.schools[${i}].field" /><br/> </div>
                    <stripes:errors field="cv.schools[${i}].field"/>
                    <div class="row"><label>Degree: </label><stripes:text name="cv.schools[${i}].degree" /><br/> </div>
                    <stripes:errors field="cv.schools[${i}].degree"/>
                    <div class="row"><label>Note: </label><stripes:text name="cv.schools[${i}].note" /><br/> </div>
                    <stripes:errors field="cv.schools[${i}].note"/>
                    </p>
                    <script type="text/javascript">
                        schoolsFields++;
                    </script>
                </c:forEach>                    
            </div>
            <div class="row add-btn"><input type="button" onclick="addSchool();" name="add" value="Add School" /></div> <br/><br/>

             
            <div id ="languages">
                <h2>Languages: </h2>
                <c:forEach var ="i" begin="0" end="${fn:length(actionBean.cv.languages) == 0 ? 0 : fn:length(actionBean.cv.languages) -1 }">
                    <p>
                    <div class="row"><label>Name: </label><stripes:text name="cv.languages[${i}].name" /><br/> </div>
                    <stripes:errors field="cv.languages[${i}].name"/>
                    <div class="row"><label>Level: </label><stripes:text name="cv.languages[${i}].level" /><br/> </div>
                    <stripes:errors field="cv.languages[${i}].level"/>
                    <div class="row"><label>Certificate: </label><stripes:text name="cv.languages[${i}].certificate" /><br/> </div>
                    <stripes:errors field="cv.languages[${i}].certificate"/>
                    </p>
                    <script type="text/javascript">
                        languagesFields++;
                    </script>
                </c:forEach>
            </div>

           <div class="row add-btn"><input type="button" onclick="addLanguage();" name="add" value="Add Language" /> </div> <br/><br/>

            
            <div id ="interests">
                <h2>Interests: </h2>
                <c:forEach var ="i" begin="0" end="${fn:length(actionBean.cv.interests) == 0 ? 0 : fn:length(actionBean.cv.interests) - 1}">
                    <div class="row"><stripes:text name="cv.interests[${i}]" /><br/> </div>
                    <stripes:errors field="cv.interests[${i}]"/>
                    <script type="text/javascript">
                        interestFields++;
                    </script>
                </c:forEach>
            </div>
            <div class="row add-btn"><input type="button" onclick="addInterest()" name="add" value="Add Interest" /> </div> <br/><br/>

            
            <div id ="skills">
                <h2>Skills: </h2>
                <c:forEach var ="j" begin="0" end="${fn:length(actionBean.cv.skills) == 0 ? 0 : fn:length(actionBean.cv.skills) -1}">      
                    <div class="row"><stripes:text name="cv.skills[${j}]" /><br/> </div>
                    <stripes:errors field="cv.skills[${j}]"/>
                    <script type="text/javascript">
                        skillsFields++;
                    </script>
                </c:forEach>
            </div>
<!--            <script/> type="text/javascript">
                $("#savebtn").click(function(){
                    $("#pdfbtn").css("display","block");
                });
            </script>-->
            <div class="row add-btn"><input type="button" onclick="addSkill()" name="add" value="Add Skill" /> </div> <br/><br/>
            <stripes:submit name="saveCV" value="Save" id="savebtn" class="save" />
            <stripes:submit name="downloadCV" value="Download PDF" id="pdfbtn" class="download"/>
        </stripes:form>
        <div id="text">

        </div>

    </body>
</html>